// 书写一个轮播图的类
/* 
属性:
1. 范围元素
2. imgBox 图片
3. pointBox 指示器
4. index 表示当前在第几张 
5.timer：定时器的返回值
方法:
1.设置焦点
2.切换
3.自动轮播
4.移入移出
5.点击事件
*/
class Banner{
    constructor(select){
        //范围元素
        this.ele=document.querySelector(select)
        //imgBox
        this.imgBox=this.ele.querySelector(".imgBox")
        //pointBox
        this.pointBox=this.ele.querySelector(".pointBox")
        // 表示索引的变量
        this.index=0
        //定时器
        this.timer=0
        //直接调用启动器
        this.init()
    }
    //0. 初始化的函数---启动器
    init(){
        //1.指示器的小点要出来
        this.setPoint()
        //2.自动播放
        this.autoPlay()
        //3.移入移出
        this.overOut()
        //4.点击事件
        this.bindEvent()
    }
    //1.设置焦点 小点点
    /* 
    1-1.拿到需要生成的多少个焦点
        =>根据imgBox内的子元素的数量
    1-2.循环生成对应的li
        =>把生成的li放在pointBox内部
    1-3.调整宽度
    =>焦点个数应该是动态的，pointBox的宽度也应该是根据焦点个数来改变
    */
    setPoint(){
        //1-1 拿到需要生成的多少个焦点
        const n = this.imgBox.children.length
        //1-2 生成焦点
        for(let i=0;i<n;i++){
            const li =document.createElement("li")
                  //默认第一个li 要有active类名
            if (i===0) li.classList.add("active")
            //每个li添加一个类名
            li.classList.add("point")
            //把索引以自定义属性的方式 写在标签上
            li.dataset.point=i

            //append上去
            this.pointBox.appendChild(li)
        }
        //写样式
        this.pointBox.style.width = (15)*n+"px"

    }
    //2.切换一张
    /* 
    如何切换一张？
        2-1.让当前的这一张 active类名 取消
        =>this.imgBox的子元素，索引为index的那张
        =>图片 和 焦点 的索引是完全配套的，顺便连焦点一起取消类名
        2-2. 修改this.index的值
        =>需要this.index改成我接下来要显示的那张的索引
        =>changeOne需要一个参数 
         => true 下一张 index++
         => false 上一张 index— -
         =>如果参数为一个数字，直接就是索引
         2-3.让this.index的值表示为这一张添加active类名
    */
   changeOne(type){
    //2-1 取消active 类名
    this.imgBox.children[this.index].classList.remove("active")
    this.pointBox.children[this.index].classList.remove("active")
    //2-2 根据type来决定修改this.index的值
    if (type===true) {
        this.index++
    }else if(type===false){
        this.index--
    }else{
        this.index=type
    }
    
    //边界的处理
    if (this.index>=this.imgBox.children.length) this.index=0
    if (this.index<0) this.index=this.imgBox.children.length-1

    //2-3.添加active类名
    this.imgBox.children[this.index].classList.add("active")
    this.pointBox.children[this.index].classList.add("active")
   }
   //3.自动播放
   /* 
   每隔一段时间，切换下一张
   +如何切换下一张？ 调用this.changeOne(),传递的参数为true
   */
  autoPlay(){
      this.timer=setInterval(() =>this.changeOne(true), 1000);
  }
  //4. 移入移出
  overOut(){
      this.ele.addEventListener("mouseover",()=>{
          clearInterval(this.timer)
      })
      this.ele.addEventListener("mouseout",()=>this.autoPlay())
  }
  //5.点击事件
  bindEvent(){
      this.ele.addEventListener("click",(e)=>{
          const t = e.target
        //   判断
        /* 
        1.左按钮
        2.右按钮
        3.某一张
        */
       if(t.className==="left") this.changeOne(false)
       if(t.className==="right") this.changeOne(true)
       if(t.className==="point")this.changeOne(t.dataset.point)
      })
  }
}